<template>
  <div class="create-strategy-form">
    <div class="form-section">
      <!-- 基本信息 -->
      <div class="form-group">
        <div class="form-item">
          <label>策略名称</label>
          <el-input v-model="formData.name" placeholder="请输入策略名称" />
        </div>
        <div class="form-item">
          <label>策略类型</label>
          <el-select v-model="formData.strategyType" placeholder="选择策略类型">
            <el-option label="市场中性网格策略" value="grid" />
            <el-option label="跨市场三角套利" value="triangle" />
            <el-option label="趋势跟踪 + 止盈止损" value="trend" />
          </el-select>
        </div>
      </div>

      <!-- 交易所和市场 -->
      <div class="form-group">
        <div class="form-item">
          <label>交易所</label>
          <el-select v-model="formData.exchange" placeholder="选择交易所">
            <el-option label="Binance" value="binance" />
            <el-option label="OKEx" value="okex" />
            <el-option label="Huobi" value="huobi" />
          </el-select>
        </div>
        <div class="form-item">
          <label>市场类型</label>
          <el-select v-model="formData.marketType" placeholder="选择市场类型">
            <el-option label="现货" value="spot" />
            <el-option label="合约" value="futures" />
            <el-option label="期权" value="options" />
          </el-select>
        </div>
      </div>

      <!-- 交易对 -->
      <div class="form-group">
        <div class="form-item full-width">
          <label>交易对</label>
          <el-input 
            v-model="formData.tradingPairs" 
            placeholder="输入交易对，例如: BTC/USDT, ETH/USDT (多个交易对用逗号分隔)" 
          />
        </div>
      </div>

      <!-- 策略描述 -->
      <div class="form-group">
        <div class="form-item full-width">
          <label>策略描述</label>
          <el-input 
            type="textarea" 
            v-model="formData.description" 
            placeholder="简要描述策略的逻辑和目标..."
            :rows="4"
          />
        </div>
      </div>

      <!-- 策略模板选择 -->
      <div class="template-section">
        <h3>选择策略模板</h3>
        <div class="template-cards">
          <div 
            class="template-card" 
            :class="{ active: formData.template === 'grid' }"
            @click="selectTemplate('grid')"
          >
            <h4>市场中性网格策略</h4>
            <p>在一定价格区间内执行网格交易，结合中性对冲，综合盈利能力。</p>
          </div>
          <div 
            class="template-card" 
            :class="{ active: formData.template === 'triangle' }"
            @click="selectTemplate('triangle')"
          >
            <h4>跨市场三角套利</h4>
            <p>利用不同市场间的价格差异，执行三角套利获取无风险收益。</p>
          </div>
          <div 
            class="template-card" 
            :class="{ active: formData.template === 'trend' }"
            @click="selectTemplate('trend')"
          >
            <h4>趋势跟踪 + 止盈止损</h4>
            <p>基于技术指标识别趋势并跟踪，具有完整止盈止损机制。</p>
          </div>
        </div>
      </div>

      <!-- 策略参数配置 -->
      <div class="params-section">
        <h3>策略参数配置</h3>
        <div class="form-group">
          <div class="form-item">
            <label>仓位大小</label>
            <el-input v-model="formData.positionSize" type="number" :min="0" :max="100">
              <template #append>%</template>
            </el-input>
            <div class="param-hint">账户使用资金百分比</div>
          </div>
          <div class="form-item">
            <label>最大杠杆</label>
            <el-input v-model="formData.maxLeverage" type="number" :min="1" :max="20">
              <template #append>x</template>
            </el-input>
            <div class="param-hint">建议不要使用太高杠杆</div>
          </div>
        </div>

        <div class="form-group">
          <div class="form-item">
            <label>止损比例</label>
            <el-input v-model="formData.stopLoss" type="number" :min="0" :max="100">
              <template #append>%</template>
            </el-input>
            <div class="param-hint">单笔交易的止损比例</div>
          </div>
          <div class="form-item">
            <label>止盈比例</label>
            <el-input v-model="formData.takeProfit" type="number" :min="0" :max="100">
              <template #append>%</template>
            </el-input>
            <div class="param-hint">单笔交易的止盈比例</div>
          </div>
        </div>

        <div class="form-group">
          <div class="form-item">
            <label>K线周期</label>
            <el-select v-model="formData.klineInterval">
              <el-option label="1分钟" value="1m" />
              <el-option label="5分钟" value="5m" />
              <el-option label="15分钟" value="15m" />
              <el-option label="30分钟" value="30m" />
              <el-option label="1小时" value="1h" />
              <el-option label="4小时" value="4h" />
            </el-select>
            <div class="param-hint">策略使用的K线周期</div>
          </div>
          <div class="form-item">
            <label>交易频率限制</label>
            <el-input v-model="formData.tradeLimit" type="number" :min="1" :max="100">
              <template #append>次/小时</template>
            </el-input>
            <div class="param-hint">控制策略最大交易频率</div>
          </div>
        </div>
      </div>

      <!-- 风控设置 -->
      <div class="risk-section">
        <h3>风控设置</h3>
        <div class="form-group">
          <div class="form-item">
            <label>单日最大亏损</label>
            <el-input v-model="formData.maxDailyLoss" type="number" :min="0" :max="100">
              <template #append>%</template>
            </el-input>
            <div class="param-hint">达到该亏损时自动停止</div>
          </div>
          <div class="form-item">
            <label>最大回撤限制</label>
            <el-input v-model="formData.maxDrawdown" type="number" :min="0" :max="100">
              <template #append>%</template>
            </el-input>
            <div class="param-hint">达到该回撤时自动停止</div>
          </div>
        </div>

        <div class="form-group">
          <div class="form-item">
            <label>价格异常波动</label>
            <el-input v-model="formData.priceDeviation" type="number" :min="0" :max="100">
              <template #append>%</template>
            </el-input>
            <div class="param-hint">超过该波动暂停交易</div>
          </div>
          <div class="form-item">
            <label>API错误处理</label>
            <el-select v-model="formData.apiErrorHandling">
              <el-option label="重试3次后暂停" value="retry3" />
              <el-option label="立即暂停" value="pause" />
              <el-option label="忽略错误" value="ignore" />
            </el-select>
            <div class="param-hint">API发生错误时的处理方式</div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button type="primary" @click="saveStrategy">保存策略</el-button>
        <el-button @click="saveAsDraft">存为草稿</el-button>
        <el-button plain @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CreateStrategyForm',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    strategyData: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      formData: {
        name: '',
        strategyType: '',
        exchange: '',
        marketType: '',
        tradingPairs: '',
        description: '',
        template: '',
        positionSize: 10,
        maxLeverage: 3,
        stopLoss: 2,
        takeProfit: 5,
        klineInterval: '15m',
        tradeLimit: 10,
        maxDailyLoss: 5,
        maxDrawdown: 15,
        priceDeviation: 8,
        apiErrorHandling: 'retry3'
      }
    }
  },
  watch: {
    strategyData: {
      immediate: true,
      handler(val) {
        if (val) {
          // 编辑模式下，用传入的策略数据初始化表单
          this.formData = {
            ...this.formData,
            ...val
          }
        }
      }
    }
  },
  methods: {
    selectTemplate(template) {
      this.formData.template = template
      switch (template) {
        case 'grid':
          this.formData.positionSize = 10
          this.formData.maxLeverage = 3
          break
        case 'triangle':
          this.formData.positionSize = 15
          this.formData.maxLeverage = 2
          break
        case 'trend':
          this.formData.positionSize = 20
          this.formData.maxLeverage = 5
          break
      }
    },
    saveStrategy() {
      console.log('保存策略:', this.formData)
      this.$message.success(this.isEdit ? '策略更新成功' : '策略创建成功')
      this.$emit('saved')
    },
    saveAsDraft() {
      console.log('保存为草稿:', this.formData)
      this.$message.success('已保存为草稿')
      this.$emit('saved')
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.create-strategy-form {
  padding: 20px 0;

  .form-section {
    max-width: 1000px;
    margin: 0 auto;
  }

  .form-group {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;

    .form-item {
      flex: 1;
      
      &.full-width {
        flex: 0 0 100%;
      }

      label {
        display: block;
        margin-bottom: 8px;
        color: #606266;
        font-size: 14px;
      }

      .param-hint {
        margin-top: 4px;
        color: #909399;
        font-size: 12px;
      }
    }
  }

  .template-section {
    margin: 30px 0;

    h3 {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 20px;
      color: #1f2f3d;
    }

    .template-cards {
      display: flex;
      gap: 20px;
      margin-top: 16px;

      .template-card {
        flex: 1;
        padding: 20px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          border-color: #409eff;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        &.active {
          border-color: #409eff;
          background-color: #ecf5ff;
        }

        h4 {
          font-size: 16px;
          margin-bottom: 12px;
          color: #303133;
        }

        p {
          color: #606266;
          font-size: 14px;
          line-height: 1.6;
        }
      }
    }
  }

  .params-section,
  .risk-section {
    h3 {
      font-size: 16px;
      font-weight: 500;
      margin: 30px 0 20px;
      color: #1f2f3d;
    }
  }

  .form-actions {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
    text-align: center;

    .el-button {
      min-width: 120px;
      margin: 0 10px;
    }
  }

  // 输入框样式优化
  .el-input,
  .el-select,
  .el-input-number {
    width: 100%;
  }

  .el-textarea {
    font-family: inherit;
  }

  // 数字输入框后缀样式
  .el-input-number {
    width: 100%;
    
    ::v-deep .el-input__suffix {
      right: 30px;
      color: #909399;
    }
    
    ::v-deep .el-input-number__decrease,
    ::v-deep .el-input-number__increase {
      background-color: #f5f7fa;
      border-color: #dcdfe6;
    }
  }

  .input-with-unit {
    position: relative;
    display: flex;
    align-items: center;

    .el-input-number {
      width: 100%;
    }

    .unit {
      position: absolute;
      right: 30px;
      color: #909399;
      font-size: 14px;
      z-index: 1;
      pointer-events: none;
    }
  }

  ::v-deep .el-input-number {
    .el-input__inner {
      padding-right: 45px !important;
    }
    
    .el-input-number__decrease,
    .el-input-number__increase {
      background-color: #f5f7fa;
      border-color: #dcdfe6;
    }
  }

  .el-input {
    .el-input__inner {
      text-align: right;
    }
    
    .el-input-group__append {
      padding: 0 15px;
      background-color: #f5f7fa;
      color: #909399;
      font-size: 14px;
    }
  }
}
</style> 